<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

const map = ref<Element>();
const isWaitShow = ref<boolean>(false);
const isIntroShow = ref<boolean>(false);
const introList = reactive([
	
])
const isVideoShow = ref<boolean>(false);

function closeVideo() {
	
}

function showVideoPop() {
	
}

function closeToast() {
	
}

function goDetails(name:string) {
  
}

function scrollRefresh() {
	
}

onMounted(() => {
	
})
</script>

<template>
	<div
		class="directory"
		ref="map"
	>
		<div
			class="map-wrap"
			ref="element"
		>
			<img
				src="../assets/img/cloud.png"
				alt=""
				class="cloud"
			/>
			<div class="list">
				<div
					class="item item1"
					@click="goDetails('lianyungang')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//lianyungang-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item1.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item2"
					@click="goDetails('xuzhou')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//xuzhou-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item2.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item3"
					@click="goDetails('suqian')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//suqian-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item3.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item4"
					@click="goDetails('huaian')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item4.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item5"
					@click="goDetails('yancheng')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item5.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item6"
					@click="goDetails('yangzhou')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item6.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item7"
					@click="goDetails('qinzhou')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//taizhou-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item7.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item8"
					@click="goDetails('nantong')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//nantong-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item8.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item9"
					@click="goDetails('zhenjiang')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//zhenjiang-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item9.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item10"
					@click="goDetails('changzhou')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item10.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item11"
					@click="goDetails('wuxi')"
				>
					<!-- <img
						src="//qiniu.charmofjiangsu.com//wuxi-soon.png"
						alt=""
						class="position"
					/> -->
					<img
						src="//qiniu.charmofjiangsu.com//map-item11.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item12"
					@click="goDetails('suzhou')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item12.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
				<div
					class="item item13"
					@click="goDetails('nanjing')"
				>
					<img
						src="//qiniu.charmofjiangsu.com//map-item13.png"
						alt=""
						class="position"
					/>
					<div class="line"></div>
					<div class="cir-border">
						<div class="cir"></div>
					</div>
				</div>
			</div>
			<img
				src="//qiniu.charmofjiangsu.com//map-pic.jpg"
				alt=""
				class="pic"
				@load="scrollRefresh"
			/>
		</div>

		<Transition name="wait-fade">
			<div
				class="wait"
				v-show="isWaitShow"
			>
				<img
					src="../assets/img/jingqingqidai-pic.png"
					alt=""
				/>
			</div>
		</Transition>

		<GoBack></GoBack>

		<div class="tips">
			<img
				src="//qiniu.charmofjiangsu.com//directory-tips.png?v2"
				alt=""
			/>
		</div>

		<canvas ref="canvasEl"></canvas>

		<!-- 篇章介绍 -->
		<Transition
			name="fade"
			appear
		>
			<chapter-intro
				:is-show="isIntroShow"
				@close="closeToast"
				@playVideo="showVideoPop"
				:intro="introList[0]"
				:isPlayBtnShow="true"
			></chapter-intro>
		</Transition>

		<!-- 视频弹窗 -->
		<div
			class="video-wrap"
			v-show="isVideoShow"
			@click="closeVideo"
		>
			<div class="video-box">
				<video
					ref="popVideo"
					src="//qiniu.charmofjiangsu.com//fengIntroVideo.mp4?v=3"
					preload="auto"
					controls
					@click.stop
				></video>
				<img
					src="../assets/img/icon-close.png"
					alt=""
					class="close"
					@click="closeVideo"
				/>
			</div>
		</div>

		<!-- 右下角介绍按钮 -->
		<div
			class="intro-btn"
			@click="store.commit('toggleDirectoryIntro', true)"
		>
			<img
				src="//qiniu.charmofjiangsu.com//global-feng.png?v3"
				alt=""
			/>
		</div>
	</div>
</template>

<style scoped lang="less">
.directory {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;

	.map-wrap {
		position: relative;
		width: 166.6666vw;
		height: 197.9166vw;

		.list {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 50;

			.item {
				position: absolute;
				width: 4.1666vw;
				animation: scaleCir 4s ease-in-out infinite;

				&:nth-child(3n) {
					animation-delay: 0.4s;
				}

				&.comming-chance {
					width: 3.0208vw;

					.line {
						display: none;
					}

					.cir-border {
						display: none;
					}
				}

				.line {
					position: absolute;
					top: 0.7812vw;
					left: 1.3541vw;
					width: 1px;
					height: 80%;
					background: #fff;
				}

				.cir-border {
					position: absolute;
					left: 0.3125vw;
					bottom: 0;
					width: 2.2916vw;
					height: 2.2916vw;
					box-sizing: border-box;
					border-radius: 50%;
					border: 0.2083vw solid #fff;

					.cir {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 1.4583vw;
						height: 1.4583vw;
						border-radius: 50%;
						background: #fff;
					}
				}

				.position {
					display: block;
					width: 100%;
				}

				&.item1 {
					top: 37.1875vw;
					left: 71.875vw;
				}

				&.item2 {
					top: 50vw;
					left: 27.6041vw;
				}

				&.item3 {
					top: 61.9791vw;
					left: 57.2395vw;
				}

				&.item4 {
					top: 72.0833vw;
					left: 78.8020vw;
				}

				&.item5 {
					top: 79.1666vw;
					left: 108.5416vw;
				}

				&.item6 {
					top: 95.9375vw;
					left: match(1758);
				}

				&.item7 {
					top: match(1910);
					left: match(2012);
				}

				&.item8 {
					top: match(2246);
					left: match(2352);
				}

				&.item9 {
					top: match(2298);
					left: match(1697);
				}

				&.item10 {
					top: match(2510);
					left: match(1972);
				}

				&.item11 {
					top: match(2588);
					left: match(2188);
				}

				&.item12 {
					top: match(2651);
					left: match(2477);
				}

				&.item13 {
					top: match(2344);
					left: match(1321);
				}
			}
		}

		.cloud {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
		}

		.pic {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.wait {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 47.3437vw;
		}
	}

	.tips {
		position: fixed;
		left: 0;
		bottom: 3.9062vw;
		width: 27.0833vw;
		transform: translateZ(10px);

		img {
			display: block;
			width: 100%;
		}
	}

	.video-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translateZ(100px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
    background: rgba(0, 0, 0, .5);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);

		.video-box {
			width: 50%;

			video {
				display: block;
				width: 100%;
			}
		}

		.close {
			position: absolute;
			right: 19.1666vw;
			bottom: 35.9375vw;
			display: block;
			width: 5.1562vw;
			z-index: 1000;
		}
	}

	.intro-btn {
		position: fixed;
		right: 0;
		bottom: 2.0833vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 34.375vw;
		box-sizing: border-box;
		background-size: 100% 100%;
		transform: translateZ(5px);
		z-index: 1000;

		img {
			display: block;
			width: 100%;
		}
	}
}

.wait-fade-enter-active {
	transition: opacity 1s ease-in;
}

.wait-fade-leave-active {
	transition: opacity 2s ease-out;
}

.wait-fade-enter-from,
.wait-fade-leave-to {
	opacity: 0;
}

@keyframes scaleCir {
	0% {
		opacity: 0.5;
	}

	25% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0.5;
	}
}
</style>
